<template>
	<div>
		<div id="main" style="width: 80vw;height:80vh;"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts/core';
import {
    CanvasRenderer
} from 'echarts/renderers';
import {
    Map3DChart
} from 'echarts-gl/charts';

export default {
	name: 'woodCity',
	mounted() {
		echarts.use(
		    [Map3DChart, CanvasRenderer]
		);
		this.getWoodCity();
	},
	methods: {
		getWoodCity() {
			var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option;
			let buildingsGeoJSON = require('./utils/buildings.json');
			echarts.registerMap('buildings', buildingsGeoJSON);
			
			var regions = buildingsGeoJSON.features.map(function (feature) {
				return {
					name: feature.properties.name,
					value: Math.max(Math.sqrt(feature.properties.height), 0.1),
					height: Math.max(Math.sqrt(feature.properties.height), 0.1)
				};
			});
		
		
			myChart.setOption({
				series: [{
					type: 'map3D',
					map: 'buildings',
					shading: 'realistic',
					realisticMaterial: {
						roughness: 0.6,
						textureTiling: 20,
						detailTexture: ROOT_PATH + '/data-gl/asset/woods.jpg'
					},
					postEffect: {
						enable: true,
						bloom: {
							enable: false
						},
						SSAO: {
							enable: true,
							quality: 'medium',
							radius: 10,
							intensity: 1.2
						},
						depthOfField: {
							enable: false,
							focalRange: 5,
							fstop: 1,
							blurRadius: 6
						}
					},
					groundPlane: {
						show: true,
						color: '#333'
					},
					light: {
						main: {
							intensity: 6,
							shadow: true,
							shadowQuality: 'high',
							alpha: 30
						},
						ambient: {
							intensity: 0
						},
						ambientCubemap: {
							texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
							exposure: 2,
							diffuseIntensity: 1,
							specularIntensity: 1
						}
					},
					viewControl: {
						minBeta: -360,
						maxBeta: 360
					},
		
					itemStyle: {
						areaColor: '#666'
					},
		
					label: {
						color: 'white'
					},
		
					silent: true,
		
					instancing: true,
		
					boxWidth: 200,
					boxHeight: 1,
		
					data: regions
				}]
			});
			option && myChart.setOption(option);
		}
	}
}
</script>

<style>
</style>
